<template>
    <Dialog
        :layer="confirmOption"
        @confirm="handleSubmit"
        @close="handleClose">
        <el-form
            class="change-pwd-form"
            ref="modifyPwdRef"
            :model="data.formInline"
            :rules="data.ruleInline"
            :label-width="120">
            <el-form-item label="旧密码" prop="oldPwd">
                <el-input
                    v-model.trim="data.formInline.oldPwd"
                    type="password"
                    show-password
                    maxlength="16"
                    placeholder="请输入旧密码"
                    clearable/>
            </el-form-item>
            <el-form-item label="新密码" prop="newPwd">
                <el-input
                    v-model.trim="data.formInline.newPwd"
                    type="password"
                    show-password
                    maxlength="16"
                    placeholder="请输入新密码"
                    clearable/>
            </el-form-item>
            <el-form-item label="确认密码" prop="newPwd2">
                <el-input
                v-model.trim="data.formInline.newPwd2"
                type="password"
                show-password
                maxlength="16"
                placeholder="请再次输入密码"
                clearable/>
            </el-form-item>
        </el-form>
    </Dialog>
</template>

<script setup>
import Dialog from '@/components/dialogComp.vue';
import { ref, reactive, defineProps, watch, nextTick } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
import { useMessage } from '@/hooks/useMessage.js';
const { messageSuccess } = useMessage();

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    }
})

// 二次确认弹窗数据
let confirmOption = reactive({
    show: false,
    title: '修改密码',
    showButton: true,
    isCenter: false,
    width: 500
});

const store = useStore();

// 校验 密码为8-16位 字母和数字混合
const PWD_REG = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
const validatePass = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入密码'));
    }else if(!PWD_REG.test(value)){
        callback(new Error('密码长度限制为8~16位,需包含字母、数字,不支持空格'));
    } else {
        if (data.formInline.newPwd !== '') {
            // 对第二个密码框单独验证
            modifyPwdRef.value.validateField('newPwd2');
        }
        callback();
    }
};

const validatePassCheck = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入密码'));
    } else if (value !== data.formInline.newPwd) {
        callback(new Error('两次输入的密码不一致'));
    } else {
        callback();
    }
};

let modifyPwdRef = ref(null);

let data = reactive(
    {
        formInline: {
            oldPwd: '',
            newPwd: '',
            newPwd2: ''
        },
        ruleInline: {
            oldPwd: [
                { required: true, message: '请输入密码', trigger: 'blur' }
            ],
            newPwd: [
                { required: true, validator: validatePass, trigger: 'blur' }
            ],
            newPwd2: [
                { required: true, validator: validatePassCheck, trigger: 'blur' }
            ]
        }
    }
);

const loading = ref(false);

function handleSubmit() {
    modifyPwdRef.value.validate((valid) => {
        if (valid) {
            loading.value = true;
            if (data.formInline.oldPwd === data.formInline.newPwd) {
                store.dispatch('message', {
                    message: '新密码与旧密码不能相同'
                });
                return;
            }
            store.dispatch('proxyAction', {
                name: 'changePassword',
                data: {
                    oldPassword: data.formInline.oldPwd, // oa 账号
                    password: data.formInline.newPwd // oa 密码
                }
            }).then((res) => {
                messageSuccess('修改成功');
                store.commit('pwdModelValue', false)
                store.dispatch('logout');
            }).catch(err => {
                // 失败
                console.log(err)
            }).finally(() => {
                loading.value = false;
            });
        }
    })
}

function handleClose () {
    store.commit('pwdModelValue', false)
}

watch(() => props.modelValue, (newVal) => {
    confirmOption.show = newVal;
    nextTick(() => {
        modifyPwdRef.value.resetFields();
    })
})
</script>

<style lang="scss" scoped>
.change-pwd-page {
    // height: calc(100vh - 240px);
    .change-pwd-form {
        height: 100%;
        // padding: 50px 0 0 70px;
         .el-input {
            width: 247px;
        }
    }
}
</style>